<template>
  <div class="app-container">
    <el-tabs v-model="activeDataType" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="温度数据" name="1">
        <DataList
          v-if="activeDataType === '1'"
          :key="activeDataType"
          :data-type="activeDataType"
          unit="温度(℃)"
          name="温度数据"
        />
      </el-tab-pane>
      <el-tab-pane label="湿度数据" name="2">
        <DataList
          v-if="activeDataType === '2'"
          :key="activeDataType"
          :data-type="activeDataType"
          unit="湿度(RH)"
          name="湿度数据"
        />
      </el-tab-pane>
      <el-tab-pane label="光照强度数据" name="3">
        <DataList
          v-if="activeDataType === '3'"
          :key="activeDataType"
          :data-type="activeDataType"
          unit="光照强度(lx)"
          name="光照强度数据"
        />
      </el-tab-pane>
      <el-tab-pane label="二氧化碳浓度数据" name="4">
        <DataList
          v-if="activeDataType === '4'"
          :key="activeDataType"
          :data-type="activeDataType"
          unit="二氧化碳浓度(ppm)"
          name="二氧化碳数据"
        />
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import DataList from '@/views/hardware/data/dataList'

export default {
  name: 'Data',
  components: {
    DataList
  },
  data() {
    return {
      activeDataType: '1'
    }
  },
  beforeMount() {

  },
  methods: {
    handleClick(tab, event) {
    }
  }
}
</script>

<style scoped>

</style>
